<div class="section @@classes section-lg">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <div class="mb-5">
                    <span class="h5 text-center">Default Alerts</span>
                </div>
            </div>
        </div>
        <!-- End of title-->
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="alert alert-secondary shadow-soft" role="alert">
                    <span class="alert-inner--text">This is a secondary alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
                <div class="alert alert-success shadow-soft" role="alert">
                    <span class="alert-inner--text">This is a success alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
                <div class="alert alert-info shadow-soft" role="alert">
                    <span class="alert-inner--text">This is a info alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
                <div class="alert alert-danger shadow-soft" role="alert">
                    <span class="alert-inner--text">This is a danger alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
            </div>
        </div>
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <div class="mt-6 mb-5">
                    <span class="h5 text-center">Dismissible Alerts with Icons</span>
                </div>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="alert alert-secondary alert-dismissible shadow-soft fade show" role="alert">
                    <span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span>
                    <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not
                        looking too good.</span>
                    <button type="button" class="close text-dark" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="alert alert-success alert-dismissible shadow-soft fade show" role="alert">
                    <span class="alert-inner--icon"><span class="far fa-thumbs-up"></span></span>
                    <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this
                        important alert message.</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="alert alert-info alert-dismissible shadow-soft fade show" role="alert">
                    <span class="alert-inner--icon"><span class="far fa-bell"></span></span>
                    <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention,
                        but it's not super important.</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="alert alert-danger alert-dismissible shadow-soft fade show" role="alert">
                    <span class="alert-inner--icon"><span class="fas fa-fire"></span></span>
                    <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try
                        submitting again.</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <div class="mt-6 mb-5">
                    <span class="h5 text-center">Alerts with additional content</span>
                </div>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="alert alert-secondary shadow-soft mb-4 mb-lg-5" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span>
                    <span class="alert-heading">Warning!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
                <div class="alert alert-success shadow-soft mb-4 mb-lg-5" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span>
                    <span class="alert-heading">Well done!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
                <div class="alert alert-info shadow-soft mb-4 mb-lg-5" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span>
                    <span class="alert-heading">Heads up!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
                <div class="alert alert-danger shadow-soft mb-4 mb-lg-5" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span>
                    <span class="alert-heading">Danger!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->
<div class="section pt-4 pb-0">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <span class="h3">Inset Shadow</span>
            </div>
        </div>
    </div>
</div>
<!-- Section -->
<div class="section section-lg">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <div class="mb-5">
                    <span class="h5 text-center">Default Alerts</span>
                </div>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="alert alert-success shadow-inset" role="alert">
                    <span class="alert-inner--text">This is a success alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
                <div class="alert alert-secondary shadow-inset" role="alert">
                    <span class="alert-inner--text">This is a warning alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
                <div class="alert alert-info shadow-inset" role="alert">
                    <span class="alert-inner--text">This is a info alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
                <div class="alert alert-danger shadow-inset" role="alert">
                    <span class="alert-inner--text">This is a danger alert with <a href="#" class="alert-link">an
                            example link</a>. Give it a click if you like.</span>
                </div>
            </div>
        </div>
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <div class="mt-6 mb-5">
                    <span class="h5 text-center">Dismissible Alerts with Icons</span>
                </div>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="alert alert-success alert-dismissible shadow-inset fade show" role="alert">
                    <span class="alert-inner--icon"><span class="far fa-thumbs-up"></span></span>
                    <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this
                        important alert message.</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="alert alert-secondary alert-dismissible shadow-inset fade show" role="alert">
                    <span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span>
                    <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not
                        looking too good.</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="alert alert-info alert-dismissible shadow-inset fade show" role="alert">
                    <span class="alert-inner--icon"><span class="far fa-bell"></span></span>
                    <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention,
                        but it's not super important.</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="alert alert-danger alert-dismissible shadow-inset fade show" role="alert">
                    <span class="alert-inner--icon"><span class="fas fa-fire"></span></span>
                    <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try
                        submitting again.</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- Title -->
        <div class="row">
            <div class="col text-center">
                <div class="mt-6 mb-5">
                    <span class="h5 text-center">Alerts with additional content</span>
                </div>
            </div>
        </div>
        <!-- End of Title -->
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="alert alert-success shadow-inset" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span>
                    <span class="alert-heading">Well done!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
                <div class="alert alert-secondary shadow-inset" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span>
                    <span class="alert-heading">Warning!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
                <div class="alert alert-info shadow-inset" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span>
                    <span class="alert-heading">Heads up!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
                <div class="alert alert-danger shadow-inset" role="alert">
                    <span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span>
                    <span class="alert-heading">Danger!</span>
                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                    <hr>
                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->